<template>
    <customNavigationBar title="管家详情" />

    <view class="content">
        <view class="infomation">
            <view class="title">基本信息</view>

            <view class="item">
                <view>管家昵称：</view>
                <view>{{ userInfo?.nickName }}</view>
            </view>
            <view class="item">
                <view>手机号码：</view>
                <view>{{ userInfo?.phone }}</view>
            </view>
            <view class="item">
                <view>注册时间：</view>
                <view>{{ userInfo?.createdAt }}</view>
            </view>
            <view class="item">
                <view>用户人数：</view>
                <view>{{ +user?.clientNum }} 人</view>
            </view>
            <view class="item">
                <view>家庭住址：</view>
                <view>{{ userInfo?.province + userInfo?.city + userInfo?.district + userInfo?.street + userInfo?.address }}</view>
            </view>
        </view>

        <view class="infomation">
            <view class="title">实名信息</view>

            <view class="item">
                <view>真实姓名：</view>
                <view>{{ userInfo?.authenticationName || '暂无' }}</view>
            </view>
            <view class="item">
                <view>证件类型：</view>
                <view>居民身份证</view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { homeApis } from '@/utils/apis';
const user = ref(null);
const userInfo = ref(null);
onLoad((e) => {
    user.value = JSON.parse(e.user);
    getData();
});
const getData = async () => {
    let res = await homeApis.getGJDetail(user.value.userId);
    userInfo.value = res.data;
};
</script>
<style>
page {
    background: #f2f4f5;
}
</style>
<style lang="scss" scoped>
.content {
    padding: 24rpx;

    .infomation {
        width: 100%;
        padding: 20rpx;
        background: #ffffff;
        border-radius: 16rpx;
        margin-bottom: 24rpx;

        .title {
            font-weight: bold;
            font-size: 32rpx;
            color: #000000;
            line-height: 44rpx;
        }

        .item {
            margin-top: 20rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20rpx;
            view {
                font-size: 28rpx;
                color: #999999;
                line-height: 40rpx;
                text-align: left;
                flex-wrap: nowrap;

                &:last-child {
                    max-width: 70%;
                    flex-wrap: wrap;
                    color: #333333;
                }
            }
        }
    }
}
</style>
